<script lang="ts" setup>
import { getSvg } from "@/utils";
import AppNewsLive from "@/components/App/NewsLive/index.vue";
import H5NewsLive from "@/components/H5/NewsLive/index.vue";
defineProps({
  resData: {
    type: Object,
    default: () => {},
  },
});
function handlePrev() {
  console.log("prev");
}
function handleNext() {
  console.log("next");
}
</script>
<template>
  <view>
    <view>
      <image class="w-full h-155" :src="getSvg('home_banner')" />

      <view
        class="w-362 mx-auto h-558 bg-[#fff] shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 translate-y-[-33px] px-16 py-20 mb-20 relative"
      >
        <view class="mx-auto">
          <view
            class="font-normal text-26 color-[0f0f0f] lh-30 text-center not-italic mb-6"
            >ผลสลากกินแบ่งรัฐบาล</view
          >
          <view class="text-center font-normal text-12 lh-14 not-italic">
            <text class="color-[#58A6DD]">งวดประจำวันที่</text>
            <text class="color-[#004D8E]"> 16 ธันวาคม 2567</text>
          </view>
        </view>
        <view class="h-56 flex flex-col justify-end items-start mb-22 ml-10">
          <view class="font-bold color-[#414141] text-16 lh-19"
            >รางวัลที่ 1</view
          >
          <view class="font-normal text-14 lh-16">
            <text class="color-[#0094CF]">รางวัลที่ 1 รางวัลละ</text>
            <text class="color-[#FF5656]">6,000,000</text>
            <text class="color-[#0094CF]">บาท</text>
          </view>
        </view>
        <view class="w-330 mx-auto h-60 bg-[#FFEA2F] rounded-10 center mb-22">
          <text
            class="font-bold text-32 color-[#111199] lh-38 tracking-[5px] not-italic"
            >847377</text
          >
        </view>
        <view class="w-330 h-132 mx-auto px-8 mb-22">
          <view class="w-full h-36 flex items-center mb-12">
            <view class="flex-[1] flex flex-col justify-between items-start">
              <view class="font-bold text-16 lh-19 color-[#414141]"
                >เลขท้าย 2 ตัว
              </view>
              <view class="font-normal text-14 lh-16">
                <text class="color-[#0094CF]">รางวัลละ</text>
                <text class="color-[#FF5656]">2,000</text>
                <text class="color-[#0094CF]">บาท</text>
              </view>
            </view>
            <view class="flex-[1] flex gap-x-12">
              <text
                class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
                >50</text
              >
              <text class="inline-block w-74 h-30"></text>
            </view>
          </view>
          <view class="w-full h-36 flex items-center mb-12">
            <view class="flex-[1] flex flex-col justify-between items-start">
              <view class="font-bold text-16 lh-19 color-[#414141]"
                >เลขท้าย 2 ตัว
              </view>
              <view class="font-normal text-14 lh-16">
                <text class="color-[#0094CF]">รางวัลละ</text>
                <text class="color-[#FF5656]">2,000</text>
                <text class="color-[#0094CF]">บาท</text>
              </view>
            </view>
            <view class="flex-[1] flex gap-x-12">
              <text
                class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
                >50</text
              >
              <text
                class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
                >50</text
              >
            </view>
          </view>
          <view class="w-full h-36 flex items-center">
            <view class="flex-[1] flex flex-col justify-between items-start">
              <view class="font-bold text-16 lh-19 color-[#414141]"
                >เลขท้าย 2 ตัว
              </view>
              <view class="font-normal text-14 lh-16">
                <text class="color-[#0094CF]">รางวัลละ</text>
                <text class="color-[#FF5656]">2,000</text>
                <text class="color-[#0094CF]">บาท</text>
              </view>
            </view>
            <view class="flex-[1] flex gap-x-12">
              <text
                class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
                >50</text
              >
              <text
                class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
                >50</text
              >
            </view>
          </view>
        </view>
        <view
          class="w-330 mx-auto h-112 b-1 b-solid b-#6EB8F2 bg-[#E2F1FF] py-16 pl-16 rounded-10 flex flex-col justify-between items-start mb-20"
        >
          <view class="">
            <view class="font-bold text-16 lh-19 color-[#414141]"
              >รางวัลข้างเคียงรางวัลที่ 1</view
            >
            <view class="font-normal text-14 lh-16">
              <text class="color-[#0094CF]">รางวัลละ</text>
              <text class="color-[#FF5656]">100,000</text>
              <text class="color-[#0094CF]">บาท</text>
            </view>
          </view>
          <view
            class="font-bold text-24 color-[#08749E] lh-28 tracking-[1px] not-italic flex justify-around items-center w-full"
          >
            <text class="">847376</text>
            <text class="w-0 h-22 b-l-1 b-l-solid b-l-#6EB8F2"></text>
            <text>847378</text>
          </view>
        </view>
        <view class="center gap-x-3">
          <text class="font-400 text-14 color-[#444] lh-16 not-italic"
            >ดูผลเพิ่มเติม</text
          >
          <image class="w-28 h-20" :src="getSvg('Frame_582')" />
        </view>

        <view class="absolute left-[-14px] top-68 z-99" @click="handlePrev">
          <image class="w-29 h-60" :src="getSvg('Frame_595(2)')"
        /></view>
        <view class="absolute right-[-14px] top-68 z-99" @click="handleNext">
          <image class="w-29 h-60" :src="getSvg('Frame_595')"
        /></view>
      </view>
      <view class="w-362 mx-auto">
        <view
          class="h-220 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[url(@/static/svg/Frame_209.svg)] bg-no-repeat bg-cover bg-center mb-14"
        >
          <view
            class="h-170 rounded-[10px_10px_0_0] pl-20 pt-30 flex flex-col justify-start items-stretch gap-y-10"
          >
            <view
              class="font-normal text-32 color-[#fff] lh-38 text-left not-italic"
              >สถิติหวย</view
            >
            <view
              class="font-400 text-14 color-[#fff] lh-16 text-left not-italic"
              >เช็กสถิติหวยย้อนหลังได้ที่นี่</view
            >
            <view class="flex justify-start items-center gap-x-10">
              <view
                class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
                >ตามวัน</view
              >
              <view
                class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
                >ตามเดือน</view
              >
              <view
                class="w-60 h-34 lh-34 text-center bg-[#fff] rounded-6 font-500 text-12 color-[#000] not-italic"
                >ตามปี</view
              >
            </view>
          </view>
          <view
            class="h-50 lh-50 bg-[#D49439] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
          >
            <text
              class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
              >คลิกเพื่อดูรายละเอียด</text
            >
            <image
              class="w-7 h-13 aspect-ratio-[7/13] object-cover"
              :src="getSvg('Frame_597')"
            />
          </view>
        </view>
        <view
          class="h-220 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[url(@/static/svg/Frame_493.svg)] bg-no-repeat bg-cover bg-center mb-15"
        >
          <view
            class="h-170 rounded-[10px_10px_0_0] pr-26 pt-49 flex flex-col justify-start items-end gap-y-10"
          >
            <view
              class="w-144 h-39 whitespace-nowrap font-normal text-32 color-[#fff] lh-38 text-center not-italic"
              >ดูหมายเลข</view
            >
            <view
              class="w-131 h-19 mr-6 whitespace-nowrap font-500 text-16 color-[#fff] lh-19 text-center not-italic"
              >ที่ถูกรางวัลย้อนหลัง</view
            >
            <view
              class="w-100 h-19 mr-16 whitespace-nowrap font-normal text-16 color-[#fff] lh-19 text-center not-italic"
              ><text>2558</text><text> ~ </text><text>2568</text></view
            >
          </view>

          <view
            class="h-50 lh-50 bg-[rgba(0,0,0,0.43)] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
          >
            <text
              class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
              >คลิกเพื่อดูรายละเอียด</text
            >
            <image
              class="w-7 h-13 aspect-ratio-[7/13] object-cover"
              :src="getSvg('Frame_597')"
            />
          </view>
        </view>
        <view
          class="h-270 shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 bg-[url(@/static/img/demo.png)] bg-no-repeat bg-cover bg-center mb-20"
        >
          <view class="h-220 rounded-[10px_10px_0_0] center color-[#f00]"
            >视频</view
          >
          <view
            class="h-50 lh-50 bg-[#0D224D] rounded-[0_0_10px_10px] px-20 flex justify-between items-center"
          >
            <text
              class="font-500 text-14 color-[#fff] lh-16 text-left not-italic"
              >คลิกเพื่อดูวิดีโอผลการออกรางวัลทั้งหมด</text
            >
            <image
              class="w-7 h-13 aspect-ratio-[7/13] object-cover"
              :src="getSvg('Frame_597')"
            />
          </view>
        </view>
        <view>
          <!-- #ifdef APP-PLUS -->
          <AppNewsLive />
          <!-- #endif -->

          <!-- #ifdef H5 -->
          <H5NewsLive />
          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>
</template>
